<template>
  <div id="app">
    <div class="common-layout">
      <el-container>
        <el-header class="head">创建产品信息</el-header>
        <el-main>
          <div class="main-top">
            <span class="btl">产品基本信息</span>
            <span class="btr">注：带有“*”必填项</span>
          </div>

          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="ruleForm.name" class="ipt" />
            </el-form-item>
            <el-form-item label="机构名称" prop="jgname" required>
              <el-input v-model="ruleForm.jgname" class="ipt" />
              <el-button type="info">查询</el-button>
            </el-form-item>

            <el-form-item label="产品类别" prop="type">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="全部" name="type" />
                <el-checkbox label="网站专区" name="type" />
                <el-checkbox label="手机APP" name="type" />
                <el-checkbox label="微刊" name="type" />
                <el-checkbox label="触摸屏" name="type" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="产品状态" prop="region">
              <el-select v-model="ruleForm.region">
                <el-option label="未开通" value="未开通" />
                <el-option label="开通" value="开通" />
              </el-select>
            </el-form-item>

            <el-form-item label="使用状态" prop="syregion">
              <el-select v-model="ruleForm.syregion">
                <el-option label="未使用" value="未使用" />
                <el-option label="试用" value="试用" />
                <el-option label="正式使用" value="正式使用" />
              </el-select>
            </el-form-item>

            <el-form-item label="经办人" prop="jbname" required>
              <el-input v-model="ruleForm.jbname" class="ipt" />
            </el-form-item>

            <el-form-item label="联系人" prop="lxname" required>
              <el-input v-model="ruleForm.lxname" class="ipt" />
            </el-form-item>

            <el-form-item label="合同编号" prop="htID" required>
              <el-input v-model="ruleForm.htID" class="ipt" />
              <span class="sp">合同ID</span>
            </el-form-item>

            <div class="main-top">
              <span class="btl">专区产品相关信息</span>
            </div>

            <el-form-item label="选专区资源类型" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="期刊" name="zuzytype" />
                <el-checkbox label="报纸" name="zuzytype" />
                <el-checkbox label="图书" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="专区服务式" prop="zufwtype" required>
              <el-checkbox-group v-model="ruleForm.zufwtype">
                <el-checkbox label="定制开发专区" name="zufwtype" />
                <el-checkbox label="博看专区" name="zufwtype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="专区开发数量" prop="num" required>
              <el-input v-model="ruleForm.num" class="ipt" />个
            </el-form-item>

            <el-form-item label="开通日期" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker
                    v-model="ruleForm.date1"
                    type="date"
                    label="Pick a date"
                    placeholder="年/月/日"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="IP段" prop="ip" required>
              <el-input v-model="ruleForm.ip" class="ipt" />
            </el-form-item>

            <el-form-item label="开发数" prop="kfnum">
              <el-input v-model="ruleForm.kfnum" class="ipt" />
            </el-form-item>

            <el-form-item label="用户名和密码" prop="kfnum" required>
              <el-upload
                ref="upload"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="false"
              >
                <template #trigger>
                  <el-button type="info">选择文件</el-button>
                  <span class="sp">导入前台用户账号</span>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label="专区地址" prop="zqaddress" required>
              <el-input v-model="ruleForm.zqaddress" class="ipt" />
              <el-button type="primary">+</el-button>
              <span class="sp">点加号按钮进行增加</span>
            </el-form-item>

            <el-form-item label="后台链接" prop="zqaddress" required>
              <el-input v-model="ruleForm.zqaddress" class="ipt" />
            </el-form-item>

            <el-form-item label="用户名和密码" prop="kfnum" required>
              <el-upload
                ref="upload"
                class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :limit="1"
                :on-exceed="handleExceed"
                :auto-upload="false"
              >
                <template #trigger>
                  <el-button type="info">选择文件</el-button>
                  <span class="sp">导入后台用户账号</span>
                </template>
              </el-upload>
            </el-form-item>

            <el-form-item label="产品保质期" prop="year" required>
              <el-input v-model="ruleForm.year" class="ipt" />年
            </el-form-item>

            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="ruleForm.beizhu" type="textarea" />
            </el-form-item>

            <div class="main-top">
              <span class="btl">APP产品相关信息</span>
            </div>

            <el-form-item label="选APP资源类型" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="期刊" name="zuzytype" />
                <el-checkbox label="报纸" name="zuzytype" />
                <el-checkbox label="图书" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="APP服务方式" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="定制开发APP" name="zuzytype" />
                <el-checkbox label="博看APP" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="APP开通账号数量" prop="num" required>
              <el-input v-model="ruleForm.num" class="ipt" />个
            </el-form-item>

            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="ruleForm.beizhu" type="textarea" />
            </el-form-item>

            <div class="main-top">
              <span class="btl">微刊产品相关信息</span>
            </div>

            <el-form-item label="选资源类型" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="期刊" name="zuzytype" />
                <el-checkbox label="报纸" name="zuzytype" />
                <el-checkbox label="图书" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="微刊服务方式" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="微信API接口对接" name="zuzytype" />
                <el-checkbox label="微信公众号授权" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="微刊运营方式" prop="zuzytype" required>
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="博看代运营" name="zuzytype" />
                <el-checkbox label="客户自运营" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="微刊账号" prop="num" required>
              <el-input v-model="ruleForm.num" class="ipt" />
            </el-form-item>

            <el-form-item label="微刊密码" prop="num" required>
              <el-input v-model="ruleForm.num" class="ipt" />
            </el-form-item>

            <el-form-item label="微刊地址" prop="zqaddress">
              <el-input v-model="ruleForm.zqaddress" class="ipt" />
            </el-form-item>

            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="ruleForm.beizhu" type="textarea" />
            </el-form-item>

            <div class="main-top">
              <span class="btl">触摸屏产品相关信息</span>
            </div>

            <el-form-item label="选博看资源类型" prop="zuzytype">
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="期刊" name="zuzytype" />
                <el-checkbox label="报纸" name="zuzytype" />
                <el-checkbox label="图书" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="选资源范围" prop="zuzytype">
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="全库" name="zuzytype" />
                <el-checkbox label="选库" name="zuzytype" />
                <el-checkbox label="选刊" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="触摸屏数量" prop="num" required>
              <el-input v-model="ruleForm.num" class="ipt" />台
            </el-form-item>

            <el-form-item label="服务方式" prop="zuzytype">
              <el-checkbox-group v-model="ruleForm.zuzytype">
                <el-checkbox label="镜像" name="zuzytype" />
                <el-checkbox label="远程" name="zuzytype" />
                <el-checkbox label="馆外用户名" name="zuzytype" />
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="备注" prop="beizhu">
              <el-input v-model="ruleForm.beizhu" type="textarea" />
            </el-form-item>

            <el-row class="mb-4">
              <el-button type="primary">确定</el-button>
              <el-button type="info">取消</el-button>
            </el-row>
          </el-form>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  jbname: "",
  jgname: "",
  lxname: "",
  htID: "",
  region: "",
  syregion: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  zuzytype: [],
  zufwtype: [],
  resource: "",
  desc: "",
  num: "",
  ip: "",
  kfnum: "",
  zqaddress: "http://",
  year: "",
  beizhu: "",
});

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  syregion: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped>
.head {
  text-align: center;
  font-weight: bolder;
}
.main-top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid gainsboro;
  /* background-color: aqua; */
}

.btl {
  font-weight: bold;
  font-size: 15px;
}
.btr {
  color: gray;
  font-size: 15px;
}

.ipt {
  width: 300px;
}

.sp {
  font-size: 13px;
  color: gray;
}

.mb-4 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: aqua; */
}
</style>
